<template>
  <div style="text-align: center">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="当前密码:" label-width="100px" prop="oldPassword">
        <el-input prefix-icon="el-icon-lock" v-model="form.oldPassword"/>
      </el-form-item>
      <el-form-item label="新密码:" label-width="100px" prop="newPassword">
        <el-input type="password" prefix-icon="el-icon-lock" v-model="form.newPassword"/>
      </el-form-item>
      <el-form-item label="确认密码:" label-width="100px" prop="rePassword">
        <el-input type="password" prefix-icon="el-icon-lock" v-model="form.rePassword"/>
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="primary" @click="edit">确 定</el-button>
          <el-button @click="">取 消</el-button>
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  export default {
    data() {
      let validataRepass = (rule, value, callback) => {
        if(value === '') {
          callback(new Error('请输入确认密码的'))
        } else if(value !== this.form.newPassword) {
          callback(new Error('两次密码不一致'))
          } else {
          callback()
        }
      }
      return {
        form: {
          oldPassword: '',
          newPassword: '',
          rePassword: ''
        },
        // rules对象设置表单验证的校验规则
        rules: {
          oldPassword: [
            {required: true, message: '请输入当前密码', trigger: 'blur'},
          ],
          newPassword: [
            {required: true, message: '请输入要设置的密码', trigger: 'blur'},
            {min: 4, max: 10, message: '密码长度4~10位之间', trigger: 'blur'}
          ],
          rePassword: [
            {required: true, message: '请输入确认密码', trigger: 'blur'},
            {validator: validataRepass, trigger: 'blur'}
          ]
        }
      }

    },
    methods: {
      edit() {
        this.$http.post('/user/editPassword',
          this.$qs.stringify({
            name: this.form.name,
            password: this.form.password,
            newPassword: this.form.newPassword,
            newPasswordAgain: this.form.repassword
          }));
      }
    }
  }
</script>

<style>

</style>
